<!--
	Created by   : jishasha
	Created time : 2017/04/01
	File explain : 趋恒材料卖家PC端交易帐务-月交易明细-应收款
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>交易帐务-月交易明细-应收款</title>
</head>
<link rel="stylesheet" href="../../libs/zui/css/zui.min.css">
<link rel="stylesheet" href="../../libs/bootstrap-table-dist/dist/css/bootstrap-table.min.css">
<link rel="stylesheet" href="../../libs/datetimepicker/css/datetimepicker.min.css">
<link rel="stylesheet" href="../../common/css/common.css">
<body>
<div class="cmn-main">
  <!-- 页头部分 包含：面包屑导航条、隐藏/显示条件按钮 -->
  <header class="cmn-header">
    <!-- 面包屑导航条 -->
    <div class="cmn-breadcrumb">
      <ul class="cmn-crumb">
        <li>
          <a class="cmn-root-breadcrumb cmn-backTo-tradeAccount" href="javascript:void(0)">交易账务</a>
        </li>
        <li>
          <i class="icon icon-angle-right"></i>
          <a class="cmn-root-breadcrumb" href="javascript:void(0)">月交易明细</a>
        </li>
      </ul>
    </div>
    <div class="cmn-change-container">
      <div class="btn-group">
        <button type="button" class="cmn-change-btn active">应收款</button>
        <button type="button" class="cmn-change-btn" id="id-buy-btn-rent"><a href="#">实收款</a></button>
      </div>
    </div>
  </header>
  <div class="cmn-query-container">
    <!-- 利用div块级元素特性进行换行 -->
    <!-- 查询条件名称及输入框组合 -->
    <div class="cmn-query-first">
      <div class="cmn-query-group cmn-query-search cmn-buyType">
        <span class="cmn-query-name">交易类型 :</span>
        <div class="cmn-query-input form-group">
          <select class="cmn-query-multi" data-name="orderType" readonly>
            <option value="">全部</option>
            <option value="1">采购</option>
            <option value="2">租赁</option>
          </select>
          <span class="cmn-multi-icon icon icon-angle-down"></span>
        </div>
      </div>
      <div class="cmn-query-group cmn-query-search">
        <span class="cmn-query-name">项目名称 :</span>

        <div class="cmn-query-input form-group">
          <select class="cmn-query-multi" id="id-projectName" data-name="projectCode" readonly>
            <option value="">全部</option>
          </select>
          <span class="cmn-multi-icon icon icon-angle-down"></span>
        </div>
      </div>
      <div class="cmn-query-group cmn-query-search">
        <span class="cmn-query-name">发货单号 :</span>
        <div class="cmn-query-input">
          <input class="cmn-query-import" data-name="shipmentNumber"/>
        </div>
      </div>
      <div class="cmn-query-group cmn-query-search">
        <span class="cmn-query-name">商品名称 :</span>
        <div class="cmn-query-input">
          <input class="cmn-query-import" data-name="merchandiseName"/>
        </div>
      </div>
      <!-- 查询按钮 -->
      <input class="cmn-query-btn" id="id-acc-query-btn" value="搜索" type="button"/>
      <!-- 清空条件按钮 -->
      <input class="cmn-empty-btn" id="id-acc-clear-btn" value="清空条件" type="button"/>
    </div>
  </div>
  <!-- 主体部分 包含：bootstrapTable-->
  <div class="cmn-table-container">
    <!-- bootstrapTable 服务器分页 开启分页模式-->
    <div class="cmn-table-title">
      <table class="table cmn-install-table" id="id-user-account-table"
             data-side-pagination="server"
             data-pagination="true"
             data-paination-list="[10,20]">
        <thead class="cmn-install-head">
        <tr>
          <th data-field="" data-align="center" data-valign="middle" data-width="135px">商品名称</th>
          <th data-field="" data-align="center" data-valign="middle" data-width="12%">商品编码</th>
          <th data-field="" data-align="center" data-valign="middle" data-width="135px">规格属性</th>
          <th data-field="" data-align="center" data-valign="middle" data-width="8%">单价</th>
          <th data-field="" data-align="center" data-valign="middle" data-width="8%">单位</th>
          <!--<th data-field="" data-align="center" data-valign="middle" data-width="8%">交易类型</th>-->
          <th data-field="" data-align="center" data-valign="middle" data-width="8%">发货数量</th>
          <th data-field="" data-align="center" data-valign="middle" data-width="8%">实收数量</th>
          <th data-field="" data-align="center" data-valign="middle" data-width="8%">到货日期</th>
          <!--<th data-field="" data-align="center" data-valign="middle" data-width="8%">租赁状态</th>-->
          <!--<th data-field="" data-align="center" data-valign="middle" data-width="8%">租期（天）</th>-->
          <th data-field="" data-align="center" data-valign="middle" data-width="8%">当月应收金额（元）</th>
        </tr>
        </thead>
      </table>
    </div>
    <div class="text-center" id="tip" style="display:none;">没有找到匹配数据</div>
    <main>
      <div id="fakeTableCon"></div>
      <div class="save-first-data"></div>
      <div class="cmn-table-pager" id="id-table-pager"></div>
      <script id="id-detail-text" type="text/html">
        <div class="cmn-white-details">
          <table class="table cmn-install-table" id="{{name}}"
                 data-side-pagination="server"
                 data-pagination="false"
                 data-striped="true">
            <thead class="cmn-hidden-head">
            <tr>
              <th data-field="merchandiseName" data-align="left" data-valign="middle" data-width="134px">商品名称</th>
              <th data-field="merchandiseCode" data-align="center" data-valign="middle" data-width="12%">商品编码</th>
              <th data-field="attribute" data-align="left" data-valign="middle" data-width="134px">规格属性</th>
              <th data-field="actualPrice" data-align="right" data-valign="middle" data-width="8%">单价</th>
              <th data-field="unit" data-align="center" data-valign="middle" data-width="8%">单位</th>
              <!--<th data-field="orderType" data-align="center" data-valign="middle" data-width="8%">交易类型</th>-->
              <th data-field="quantity" data-align="center" data-valign="middle" data-width="8%">发货数量</th>
              <th data-field="receiveQuantity" data-align="center" data-valign="middle" data-width="8%">实收数量</th>
              <th data-field="receiveTime" data-align="center" data-valign="middle" data-width="8%">到货日期</th>
              <!--<th data-field="status" data-align="center" data-valign="middle" data-width="8%">租赁状态</th>-->
              <!--<th data-field="leaseTerm" data-align="center" data-valign="middle" data-width="8%">当月租期（天）</th>-->
              <th data-field="amountDue" data-align="right" data-valign="middle" data-width="8%">应收金额（元）</th>
            </tr>
            </thead>
          </table>
        </div>
      </script>
    </main>
  </div>
</div>
<!-- 引入require.js，设置配置文件 -->
<script data-main="mater-month-trade-receivable" src="../../libs/require.js"></script>
</body>
</html>